<template>
    <div class="back">
        <div class="box">
            <div class="titleName">
                陕西广电用户中心管理平台
            </div>
            <div class="inoutBox">
                <div class="inoutBoxLeft">
                    账号：
                </div>
                <input class="inoutBoxInp" v-model='idVal' placeholder="请输入账号" type="text">
            </div>
            <div class="inoutBox">
                <div class="inoutBoxLeft">
                    密码：
                </div>
                <input class="inoutBoxInp" v-model='passwordVal' placeholder="请输入密码" @keyup.enter='submit' type="password">
            </div>
            <div class="warn" v-show='warnShow'>
                账号或密码输入错误，请重新输入
            </div>
            <div class="register" @click="registerClick()">
                登 录
            </div>
        </div>
    </div>
</template>
<script>
import { mapActions } from "vuex";
import taskRequest from "../assets/task";
const crypto = require("crypto");
export default {
  data() {
    return {
      warnShow: false,
      idVal: "",
      passwordVal: ""
    };
  },
  filters: {},
  created: function() {
    var self = this;
  },
  watch: {},
  mounted() {
    let self = this;
    document.onkeydown = function(e) {
      if (e.keyCode == 13) {
        self.registerClick();
      }
    };
  },
  methods: {
    loginListsClick(index) {},
    cancelClick() {
      var self = this;
      self.updatePwdShow = false;
      self.disabledShow = false;
    },
    // 键盘事件
    submit() {
      this.registerClick();
    },
    // 登录
    // registerClick() {
    // let tabList = [
    //     { name: '业务主管理', ico: 'icon font_family icon-yewu', rout: '/home/business', show: true },
    //     { name: '用户管理', ico: 'icon font_family icon-yonghuguanli', rout: '/home/user', show: false },
    //     { name: '订单管理', ico: 'icon font_family icon-dingdan', rout: '/home/orderForm', show: false },
    //     { name: '活动管理', ico: 'icon font_family icon-huodong', rout: '/home/activity', show: false },
    //     { name: '任务管理', ico: 'icon font_family icon-renwu', rout: '/home/task', show: false },
    //     { name: '积分管理', ico: 'icon font_family icon-jifen', rout: '/home/integral', show: false },
    //     { name: '奖品管理', ico: 'icon font_family icon-jiangpin', rout: '/home/prize', show: false },
    //     {
    //         name: '权限管理', ico: 'icon font_family icon-quanxian', backShow: false,
    //         children: [
    //             { name: '角色管理', rout: '/home/jurisdiction', show: false },
    //             { name: '账户管理', rout: '/home/account', show: false }
    //         ]
    //     },
    //     { name: '群发消息', ico: 'icon font_family icon-xiaoxibiao', rout: '/home/message', show: false },
    //     { name: '应用管理', ico: 'icon font_family icon-yingyongbiao', rout: '/home/use', show: false },
    // ];
    // sessionStorage.setItem('TABLIST', JSON.stringify(tabList));
    //     },
    cancelClick() {
      var self = this;
      self.updatePwdShow = false;
      self.disabledShow = false;
    },
    // 键盘事件
    submit() {
      this.registerClick();
    },
    // 登录
    registerClick() {
      let self = this;
      if (self.idVal == "" || self.passwordVal == "") {
        self.warnShow = true;
      } else {
        self.warnShow = false;
        let possible = self.passwordVal;
        let shaCode = crypto.createHash("md5");
        let md5Str = shaCode.update(possible, "utf-8").digest("hex");
        taskRequest
          .adminLoginFun({
            account: self.idVal,
            password: md5Str
          })
          .then(data => {
            if (data.statusCode == 200) {
              sessionStorage.setItem("TOKEN", data.data.token);
              sessionStorage.setItem("USER_ID", data.data.admin.code);
              sessionStorage.setItem("ADMIN", JSON.stringify(data.data.admin));
              if (data.data.resouses) {
                if (data.data.resouses.length > 0) {
                  sessionStorage.setItem(
                    "TABLIST",
                    JSON.stringify(data.data.resouses)
                  );
                  if (data.data.resouses[0].children) {
                    self.$router.push({
                      path: data.data.resouses[0].children[0].rout
                    });
                  } else {
                    self.$router.push({
                      path: data.data.resouses[0].rout
                    });
                  }
                } else {
                  self.$message("暂无权限");
                }
              } else {
                self.$message("暂无权限");
              }
            } else {
              self.warnShow = true;
            }
          })
          .catch(msg => {
            self.$message("服务器异常");
          });
      }
    }
  }
};
</script>
<style scoped>
.back {
  width: 100%;
  height: 100%;
  background: url("../../static/img/back.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;
  position: absolute;
}

.box {
  width: 460px;
  height: 404px;
  background: #ffffff;
  box-shadow: 0px 20px 50px 0px #cfd8dd;
  border-radius: 20px;
  margin: 200px auto;
  overflow: hidden;
  animation: madalsBox 0.3s;
}

@keyframes madalsBox {
  from {
    transform: scale(0.5, 0);
    opacity: 0;
  }
  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}

.titleName {
  width: 460px;
  text-align: center;
  height: 24px;
  font-size: 24px;
  font-weight: bold;
  font-family: MicrosoftYaHei-Bold;
  color: #1f4c6f;
  line-height: 24px;
  margin-top: 64px;
}

.inoutBox {
  width: 300px;
  height: 34px;
  border-radius: 27px;
  border: 1px solid #dadce1;
  margin: 44px auto;
  display: flex;
  align-items: center;
}

.inoutBoxLeft {
  width: 48px;
  height: 16px;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: #2f3a5d;
  line-height: 16px;
  margin-left: 24px;
}

.inoutBoxInp {
  height: 34px;
  width: 210px;
  line-height: 34px;
  font-size: 16px;
  color: #2f3a5d;
}

.register {
  width: 300px;
  height: 40px;
  background: linear-gradient(-135deg, #3296e0, #4ddaff);
  border-radius: 30px;
  margin: 0px auto;
  font-size: 18px;
  text-align: center;
  line-height: 40px;
  color: white;
  cursor: pointer;
}

.warn {
  width: 460px;
  height: 14px;
  line-height: 14px;
  font-size: 14px;
  color: #ed4a47;
  margin: -25px 0 25px 0;
  text-align: center;
  animation: warnFont 0.3s;
}

@keyframes warnFont {
  0% {
    transform: scale(0.5, 0);
    opacity: 0;
  }
  80% {
    transform: scale(1.3, 1.3);
  }
  100% {
    transform: scale(1, 1);
    opacity: 1;
  }
}
</style>